<template>
    <div v-if="!user_data.login_type">
        <error text="用户未登录" />
    </div>
    <div v-else>
        <el-card shadow="never" :body-style="{ padding: '0px' }">
        <el-row>
            <el-col :span="3">
                <el-menu default-active="1" router>
                <el-menu-item index="1" route="/user/index/order">
                    <i class="el-icon-goods"></i>
                    <span slot="title">我的订单</span>
                </el-menu-item>
                <el-menu-item index="2" route="/user/index/cart">
                    <i class="el-icon-shopping-cart-2"></i>
                    <span slot="title">我的购物车</span>
                </el-menu-item>
                <el-menu-item index="6" route="/user/index/serve">
                    <i class="el-icon-box"></i>
                    <span slot="title">售后服务</span>
                </el-menu-item>
                <el-menu-item index="3" route="/user/index/data">
                    <i class="el-icon-user"></i>
                    <span slot="title">账户资料</span>
                </el-menu-item>
                <el-menu-item index="4" route="/user/index/address">
                    <i class="el-icon-truck"></i>
                    <span slot="title">收获地址</span>
                </el-menu-item>
                <el-menu-item index="5" route="/">
                    <i class="el-icon-house"></i>
                    <span slot="title">返回首页</span>
                </el-menu-item>
                </el-menu>
            </el-col>
            <el-col :span="21">
                <div class="body">
                    <router-view/>
                </div>
            </el-col>
        </el-row>
        </el-card>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import error from '@/views/page/error'; // 错误页面

export default {
    components: {
        error,
    },
    data() {
        return {
            photo: require('@/assets/img/test1.jpg'),
        };
    },
    computed: {
        // 取值
        ...mapState({
            user: state => state.user.user,
            user_data: state => state.user.user_data
        })
    }
}
</script>

<style lang="less" scoped>
.body {
    padding: 20px;
}
.logo {
    width: 100%;
    height: 100%;
}
</style>